<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>登录页面</title>
</head>

<body>
  <h1>用户登录</h1>
  用户名：<input name="userName" type="text" id="userName"><br>
  密码：<input name="password" type="password" id="password"><br>
  <input type="button" value="登录" onclick="login()">
  
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
  <script>
    function login() {
      // 使用ajax
      // 共四个参数: 
      // $.ajax({
      // 1. url: 要执行的后端的接口url,
      // 2. type: 发送请求的方法(不写默认GET),
      // 3. data: {
      //   后端参数的名字: 接收到的数据
      //  },
      // 4.sucess: function(result){
      //     根据返回值result, 来进行下一步操作
      //  }

      // });
     $.ajax({
      url:"/user/login",
      type:"post",
      data:{
        "userName":$("#userName").val(),
        "passwords":$("#password").val()
      },
      success:function(result){
        if(result){
          //下面三种方式都可以完成页面跳转, 有略微差别
          location.href = "index.html";
          //location.assign("index.html");
          //location.replace("index.html");
        }else{
          //弹框
          alert("用户名或密码错误");
        }
      }

     });

    
    }

  </script>
</body>

</html>